<template>
  <div class="content">
    <div class="minContent" ref="echarts"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      chartInstance: null,
      data: [],
      currentPage: 1,
      timeId: null,
      colorArr: [
        ["#0BA82C", "#4FF778"],
        ["#2E72BF", "#23E5E5"],
        ["#5052EE", "#AB6EE5"],
      ],
      start: 0,
      end: 40,
    };
  },
  mounted() {
    this.init();
    this.getData();
    window.addEventListener("resize", this.widthChange);
    this.widthChange();
  },
  destroyed() {
    window.removeEventListener("resize", this.widthChange);
    clearInterval(this.timeId);
  },
  methods: {
    init() {
      this.chartInstance = this.$echarts.init(this.$refs.echarts, "chalk");
      const initOption = {
        title: {
          text: "▍ 地区销售排行",
          left: 20,
          top: 20,
          textStyle: {
            fontWeight: "normal",
          },
        },
        xAxis: {
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          name: "销售金额(万)",
        },
        tooltip: {
          //   trigger: "axis",
        },
        series: [
          {
            type: "bar",
            data: [23, 24, 18, 25, 27, 28, 25],
            itemStyle: {
              //线性渐变
              color: (arg) => {
                let targetColor = [];
                if (arg.value > 300) {
                  targetColor = this.colorArr[0];
                } else if (arg.value > 200) {
                  targetColor = this.colorArr[1];
                } else {
                  targetColor = this.colorArr[2];
                }
                return new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: targetColor[0],
                  },
                  {
                    offset: 1,
                    color: targetColor[1],
                  },
                ]);
              },
            },
          },
        ],
        grid: {
          top: "40%",
          left: "6%",
          right: "6%",
          bottom: "6%",
          containLabel: true,
        },
      };
      this.chartInstance.setOption(initOption);
      this.chartInstance.on("mouseover", () => {
        clearInterval(this.timeId);
      });
      this.chartInstance.on("mouseout", () => {
        this.timeChange();
      });
    },
    async getData() {
      const { data: res } = await this.$http.get("rank");
      this.data = res;
      // console.log(res);
      this.updateEchart();
      this.timeChange();
    },
    updateEchart() {
      // 从大到小排序
      this.data.sort((a, b) => {
        return b.value - a.value;
      });

      const XData = this.data.map((v) => {
        return v.name;
      });
      const YData = this.data.map((v) => {
        return v.value;
      });
      // console.log(XData);
      var dataOption = {
        xAxis: {
          data: XData,
        },
        series: {
          data: YData,
        },
        dataZoom: {
          show: false,
          start: this.start,
          end: this.end,
        },
      };
      this.chartInstance.setOption(dataOption);
    },
    timeChange() {
      if (this.timeId) {
        clearInterval(this.timeId);
      }

      this.timeId = setInterval(() => {
        this.start++;
        this.end++;
        if (this.end == 100) {
          this.start = 0;
          this.end = 30;
        }
        this.updateEchart();
      }, 500);
    },
    widthChange() {
      const titleSize = (this.$refs.echarts.offsetWidth / 100) * 3.6;
      const sizeOption = {
        title: {
          textStyle: {
            fontSize: titleSize,
          },
        },
        series: {
          barWidth: titleSize,
          itemStyle: {
            barBorderRadius: [titleSize / 2, titleSize / 2, 0, 0], //（顺时针左上，右上，右下，左下）
          },
        },
      };
      this.chartInstance.setOption(sizeOption);
      this.chartInstance.resize();
    },
  },
};
</script>
